<template>
  <!-- 一级路由左侧导航栏 -->
  <div>
    <div class="contentWrap clearfloat">
      <section>
        <ul>
          <li v-for="item in links">
            <span></span>
            <router-link tag="a" :to="item.url">{{item.linkName}}</router-link>
          </li>
        </ul>
      </section>
      <article>
        <router-view></router-view>
      </article>
    </div>
  </div>
</template>

<script>
  export default {
    name: "leftNav",
    props:['links']
  }
</script>

<style scoped>
  .contentWrap {
    top: 160px;
    bottom: 0px;
    position: absolute; /*div 自适应高度*/
    width: 100%;
  }

  section {
    float: left;
    width: 180px;
    border-right: 1px solid #ccc;
    height: 100%;
  }

  section ul {
    border-bottom: 1px solid #eee;
    background-color: #f7f7f7;
    line-height: 30px;
    font-size: 12px;
    margin: 0;
    padding: 0;
  }

  section ul li {
    list-style: none;
    border-bottom: 1px solid #eee;
  }

  section ul li span {
    display: inline-block;
    background-color: #fb9337;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    margin: 0 10px 0 10px;
  }

  section ul li a {
    text-decoration: none;
    color: #fb9337;
  }

  article {
    float: left;
    width: -webkit-calc(100% - 181px);
    width: -moz-calc(100% - 181px);
    width: calc(100% - 181px);
    height: 100%;
    background-image: url("/static/images/dbg.jpg");
  }
</style>
